<template>
	<view>
		<view>
			<table-title content="发票办理表详情"></table-title>
			<view class="record-id">单号：{{processNo}}</view>
			<view class="in-center">
				<small-title content="基本资料"></small-title>
				<view class="state-bar">
					<view class="state-msg">{{state}}</view>
				</view>
			</view>
			<view class="item-table">
				<view-item name="租户名称" :value="userMsg.userCompany"></view-item>
				<view-item name="楼盘" :value="userMsg.userBuilding"></view-item>
				<view-item name="楼层" :value="userMsg.userFloor"></view-item>
				<view-item name="房间号" :value="userMsg.userRoom" :isLast="true"></view-item>
			</view>
			<small-title content="办理内容"></small-title>
			<view style="margin-left: 80rpx;margin-right: 50rpx;">
				<uni-forms :modelValue="orderInfo">
					<uni-forms-item label="开票类别" name="invoiceType">
						<uni-easyinput :disabled="true" name="name" style="background-color: #ffffff;" type="text" v-model="invoiceType" />
					</uni-forms-item>
					<uni-forms-item label="消费类别" name="typeName">
						<uni-easyinput :disabled="true" name="name" style="background-color: #ffffff;" type="text" v-model="orderInfo.typeName" />
					</uni-forms-item>
					<uni-forms-item label="消费金额" name="amount">
						<uni-easyinput :disabled="true" name="taxNo" style="background-color: #ffffff;" type="text" v-model="orderInfo.amount" />
					</uni-forms-item>
					<uni-forms-item label="消费时间" name="createTime">
						<uni-easyinput :disabled="true" name="address" style="background-color: #ffffff;" type="text" v-model="orderInfo.createTime" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<small-title content="发票抬头信息"></small-title>
			<view style="margin-left: 80rpx;margin-right: 50rpx;">
				<uni-forms :modelValue="taxInfo">
					<uni-forms-item label="名称" name="name">
						<uni-easyinput name="name" style="background-color: #ffffff;" type="text" v-model="taxInfo.name" :disabled="true" />
					</uni-forms-item>
					<uni-forms-item label="税号" name="taxNo">
						<uni-easyinput name="taxNo" style="background-color: #ffffff;" type="text" v-model="taxInfo.taxNo" :disabled="true" />
					</uni-forms-item>
					<uni-forms-item label="单位地址" name="address">
						<uni-easyinput name="address" style="background-color: #ffffff;" type="text" v-model="taxInfo.address" :disabled="true" />
					</uni-forms-item>
					<uni-forms-item label="电话号码" name="phone">
						<uni-easyinput name="phone" style="background-color: #ffffff;" type="number" v-model="taxInfo.phone" :disabled="true" />
					</uni-forms-item>
					<uni-forms-item label="开户银行" name="bank">
						<uni-easyinput name="bank" style="background-color: #ffffff;" type="text" v-model="taxInfo.bank" :disabled="true" />
					</uni-forms-item>
					<uni-forms-item label="银行账户" name="bankAccount">
						<uni-easyinput name="bankAccount" style="background-color: #ffffff;" type="number" v-model="taxInfo.bankAccount" :disabled="true" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<small-title content="处理进度"></small-title>
			<proccess-bar v-if="processFlag" ref="proccessBar" :proccessList="proccessListDefult"></proccess-bar>
			<view v-if="status===0 && userRightDetail.invoice.opeCommRight" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="verify(1)">审核通过</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="open">驳回</button>
				</view>
			</view>
			<view v-if="status===2 && userRightDetail.invoice.opeCommRight" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="sent">确认已派送</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view v-if="status===1 && userRightDetail.invoice.finanCommRight" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="sending">通知派送发票</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
		</view>
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog mode="input" message="成功消息" title="请输入驳回理由" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>		

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE_2
	} from "../../../util/network.js"
	import {
		processHistoryList
	} from "../../../util/common.js"
	export default{
		data() {
			return {
				orderInfo:'',
				taxInfo:'',
				invoiceType:'',
				processFlag:false,
				status:-1,
				token:'',
				recordId: '',                                                         //单号
				processNo:'待分配',
				state: '',																	   //状态
				nopassReasons:'审核通过',
				userMsg:{'userName':'','userPhone':'','userCompany':'','userBuilding':'',
					'userFloor':'','userRoom':''},
				proccessList:[
					{'type':'firstCanvas','commentMsg':'发起申请','time':'2021-01-01 01:01:11'},
					{'type':'middleCanvas','commentMsg':'受理','time':'2020-02-02 02:02:22'},
					{'type':'lastCanvas','commentMsg':'办结','time':'2020-03-03 03:33:33'}
				],                                                                                 //处理进度
				proccessListDefult:[],

			}
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm(value) {
				this.$refs.popup.close()
				if(value == ""){
					uni.showModal({
						content:'理由不能为空',
						showCancel:false
					});
					this.$refs.popup.close()
				}else{
					if(this.userRightDetail.knotCommission.primeAuth == 1){
						this.nopassReasons = "运营主管已驳回发票申请，原因：" + value
					}else{
						this.nopassReasons = "楼层管家已驳回发票申请，原因：" + value
					}
					this.verify(5)

					// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
					// ...
					this.$refs.popup.close()
				}
			},
		
		   verify(status){
		   	console.log("[info]","确认申请：" + this.recordId)
			if(status != 5){
				if(this.userRightDetail.knotCommission.primeAuth == 1){
					this.nopassReasons = "运营主管已审核通过"
				}else{
					this.nopassReasons = "楼层管家已审核通过"
				}
			}
		   	uni.request({
		   		url:`${ONLINE_SERVER_ADDRESS_BASE_2}/invoice/verify/` + this.recordId,
		   		header: {
		   			'Authorization': this.token,
		   		},
		   		data: {
					status:status,
		   			commentMsg: this.nopassReasons                       //操作信息
		   		},
		   		method:'POST',
		   		success: function (res) {
		   			if(res.data.code == 200){
		   				uni.navigateBack()
		   			}
		   		},
		   		fail: (res) => {
		   			console.log("确认发票申请调用失败")
		   		}
		   	})
		   },
		   sending(){
		   	console.log("[info]","已开发票：" + this.recordId)
			if(this.userRightDetail.invoice.primeAuth == 5){
				this.nopassReasons = "财务主管已线下开具发票"
			}else{
				this.nopassReasons = "财务专员已线下开具发票"
			}
		   	uni.request({
		   		url:`${ONLINE_SERVER_ADDRESS_BASE_2}/invoice/sending/` + this.recordId,
		   		header: {
		   			'Authorization': this.token,
		   		},
		   		data: {
		   			commentMsg: this.nopassReasons,                       //操作信息
		   		},
		   		method:'POST',
		   		success: function (res) {
		   			if(res.data.code == 200){
		   				uni.navigateBack()
		   			}
		   		},
		   		fail: (res) => {
		   			console.log("已开发票调用失败")
		   		}
		   	})
		   },
		   sent(){
		   	console.log("[info]","已派送发票：" + this.recordId)
			if(this.userRightDetail.knotCommission.primeAuth == 1){
				this.nopassReasons = "运营主管已派送发票"
			}else{
				this.nopassReasons = "楼层管家已派送发票"
			}
		   	uni.request({
		   		url:`${ONLINE_SERVER_ADDRESS_BASE_2}/invoice/sent/` + this.recordId,
		   		header: {
		   			'Authorization': this.token,
		   		},
		   		data: {
		   			commentMsg: this.nopassReasons                       //操作信息
		   		},
		   		method:'POST',
		   		success: function (res) {
		   			if(res.data.code == 200){
		   				uni.navigateBack()
		   			}
		   		},
		   		fail: (res) => {
		   			console.log("已派送发票调用失败")
		   		}
		   	})
		   },
		   getOrder(){
			   let _this = this
				console.log("[info]","发票申请查询成功，工单号为：" + this.recordId)
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/invoice/show/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					method:'GET',
					success: function (res) {
						if(res.data.code == 200){
							console.log(res)
							 if(res.data.data.specialType == 1){
								 _this.invoiceType = '专用发票'
							 }else{
								 _this.invoiceType = '普通发票'
							 }
							 _this.orderInfo =JSON.parse(res.data.data.orderInfo)
							 _this.taxInfo = JSON.parse(res.data.data.taxInfo)
							 _this.status = parseInt(res.data.data.status)
							 switch(_this.status) {
								 case 0:
									_this.state = "待管家审核"
									break;
								 case 1:
									_this.state = "待财务办理"
									break;
								 case 2:
									_this.state = "待管家派送"
									break;
								 case 3:
									_this.state = "待用户确认"
									break;
								 case 4:
									_this.state = "已办结"
									break;
								 case 5:
									_this.state = "管家已驳回"
									break;
								 default:
									_this.status = -1
									_this.state = "未定义状态"
							 } 
							 _this.userMsg.userCompany = res.data.data.createUserInfo.name
							 _this.userMsg.userBuilding = res.data.data.createUserInfo.title
							 _this.userMsg.userFloor = res.data.data.createUserInfo.floor
							 _this.userMsg.userRoom = res.data.data.createUserInfo.houseNumber
							 _this.processNo = res.data.data.processNo
							 _this.proccessListDefult = processHistoryList(res.data.data.processDetail)
							 _this.processFlag = true
						}
					}
				})
		   },
		   back(){
			   uni.navigateBack()
		   },
		},
		onLoad(option) {
			//传入单号
			if(uni.getStorageSync('userinfo') != null){
				this.userRightDetail = uni.getStorageSync("userRight")
				this.recordId = option.id
				this.token = uni.getStorageSync('token')
			}else{
				uni.navigateTo('../../login/login')
			}
		},
		mounted() {
			//如果是新建表单则不查询
			if(this.state != '待申请'){
				this.getOrder()
			}
		}
	}
</script>

<style>
	page{
		background-color: #ffffff
	}
	.record-id{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.state-bar{
		display: flex;
		align-items: center;
		color: #FFFFFF;
		background-color: #DD524D;
		width: 260rpx;
		justify-content: center;
		margin-left: auto;
		margin-right: 50rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		height: 50rpx;
	}
	.state-msg{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.mix-button{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.left-part{
		float: right;
	}
	.right-part{
		float: left;
	}
	.left-button{
		background-color: #FF0000;
		border-radius: 50rpx 0 0 50rpx;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.right-button{
		background-color: #0000FF;
		border-radius: 0 50rpx 50rpx 0;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.in-center{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.add-button {
		border-width: 0px;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0 40rpx 250rpx;
		height: 50rpx;
		width: 250rpx;
		display: flex;
		color: #22B242;
	}
	.payway-style {
		display: flex;
		flex-direction: column;
		width: 650rpx;
	}
	.first-radio {
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding-left: 25rpx;
		border: solid 0rpx #C8C7CC;
		border-bottom: none;
		border-right: none;
	}
	.second-radio {
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding-left: 25rpx;
		border: solid 0rpx #C8C7CC;
		border-right: none;
		width: 50rpx;
	}
	.payway-choice {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border: solid 0rpx #C8C7CC;
		width: 600rpx;
		border-left: none;
	}
	.payway-logo {
		width: 50rpx;
		height: 50rpx;
		margin: 0 25rpx 0 25rpx;
	}
</style>
